<template>
  <div class="page flex-col">
    <div class="box_1 flex-row">
      <div class="box_2 flex-col">
        <div class="block_2 flex-col">
          <div class="top-box flex-col">
            <span class="text_8">上千种实验仪器助力教学实验</span>
            <div class="box_5 flex-row">
              <div class="text-wrapper flex-col" v-for="item in tabList" :key="item.value"
                :class="tabActives === item.value ? 'actives' : ''" @click="handleTabClick(item.value)">
                <span class="text">{{ item.label }}</span>
              </div>
            </div>
            <div class="box_6 flex-row">
              <a-input class="search-box-input" v-model:value="inputStr" allow-clear placeholder="请输入搜索关键词" />
              <a-button class="search-box-button" :icon="h(SearchOutlined)" type="primary"
                @click="getInstrumentPagedList">搜索</a-button>
            </div>
            <div class="box_7 flex-row">
              <div class="text-wrapper_10 flex-col" v-for="(item, index) in tagList" @click="handleSearch(item.name)" :key="index">
                <div class="text_14">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="text-wrapper_15 flex-row justify-between">
            <span class="text_19">热门实验</span>
            <span class="text_20">研究光的行为和性质</span>
          </div>
          <div class="grid_1 flex-row">
            <div class="list-items_1 flex-col" v-for="(item, index) in tableData" :key="index" @click="handlePreview(item)">
              <div class="block_3 flex-col">
                <img :src="item.thumb_url" alt="" srcset="">
              </div>
              <div class="block_4 flex-row ">
                <div class="text-wrapper_16 flex-col">
                  <span class="text_21" v-html="item.instrument_category_name"></span>
                </div>
                <span class="text_22" v-html="item.name"></span>
              </div>
              <div class="text-wrapper_17 flex-col">
                <div class="text" v-html="item.introduce">
                </div>
              </div>
            </div>
          </div>
          <div class="text-wrapper_18 flex-col" @click="handleGoLogin">
            <span class="text_24">查看全部仪器</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import API from "@/api/home";
import { ref } from 'vue'
import { h } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const handleGoLogin = () => {
  router.push(`login`);
}
const handlePreview = async (item:any) => {

  router.push({
    path: "/wiki-detail",
    query: {
      id: item.instrument_id
    },
  });
};
const inputStr = ref('');

const handleTabClick = (item: string) => {
  console.log(item)
  tabActives.value = item;
  getInstrumentListByClickCount();
  inputStr.value = '';
}
const handleTagClick = (item: string) => {
  inputStr.value = item;
}
const handleSearch = (item: string) => {
  inputStr.value = item;
  getInstrumentPagedList();
}
const tableData = ref<any>([])
//获取实验仪器列表
const getInstrumentPagedList = async () => {
  let params = {
    current:1,
    pageSize:10,
    keyword: inputStr.value,
    instrument_category_idArray:tabActives.value != '全部' ? [tabActives.value] : []
  };
  const res: any = await API.InstrumentPagedList({ args: params });

  tableData.value = res.data;
  console.log(tableData.value)
}
const tabActives = ref('全部');
const tabList = ref<any>([
  {
    label: '全部',
    value: '全部'
  }
]);
//获取实验仪器分类
const getInstrumentCategoryOptions = async () => {
  let params = {
    keyWords: ''
  };
  const res = await API.InstrumentCategoryOptions(params);
  tabList.value = tabList.value.concat(res);
}

const tagList = ref<any>([])

const getInstrumentListByClickCount = async () => {
  let params = {
    keyWords: tabActives.value
  };
  const res = await API.InstrumentListByClickCount(params);
  tagList.value = res
}

onMounted(() => {
  getInstrumentCategoryOptions();
  getInstrumentPagedList();
  getInstrumentListByClickCount();
})
</script>
<style scoped lang="less">
.page {
  background-color: rgba(251, 251, 251, 1);
  position: relative;
  width: 100%;

  .box_1 {
    width: 100%;

    .box_2 {
      width: 100%;

      .block_2 {
        box-shadow: 0px 16px 32px 0px rgba(17, 101, 237, 0.15);
        background-image: url(/lanhu/2b70db7067ba48a8831da999d02516a3_mergeImage.png);
        width: 100%;
        height: 617px;
        margin-top: 1px;

        .top-box {
          width: calc(100% - 384px);
          margin: 0px auto;

          .text_8 {
            width: 650px;
            height: 80px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 50px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 80px;
            margin: 95px auto 0 auto;
          }

          .box_5 {
            width: 642px;
            height: 54px;
            margin: 74px auto 0 auto;

            .text-wrapper {
              border-radius: 12px 12px 0px 0px;
              height: 54px;
              padding:0 20px;
              cursor: pointer;
              text-align: center;

              .text {
                height: 30px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 22px;
                font-weight: normal;
                text-align: center;
                white-space: nowrap;
                line-height: 30px;
                margin-top: 12px;
              }
            }

            .actives {
              background-color: rgba(255, 255, 255, 1);
              border-radius: 12px 12px 0px 0px;
              height: 54px;
              margin-left: 8px;
              padding:0 20px;
              text-align: center;

              .text {
                height: 30px;
                overflow-wrap: break-word;
                color: rgba(38, 38, 38, 1);
                font-size: 22px;
                font-weight: normal;
                text-align: center;
                white-space: nowrap;
                line-height: 30px;
                margin-top: 12px;
              }
            }

          }

          .box_6 {
            box-shadow: 0px 8px 12px 0px rgba(17, 101, 237, 0.05);
            background-color: rgba(255, 255, 255, 1);
            border-radius: 12px;
            width: 100%;
            height: 80px;
            position: relative;
            overflow: hidden;

            .search-box-input {
              overflow-wrap: break-word;
              font-size: 22px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 30px;
              border: 0px;

            }

            .search-box-button {
              position: absolute;
              right: 2px;
              top: 2px;
              width: 168px;
              height: 76px;
              background: #1165ED;
              border-radius: 0px 12px 12px 0px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 26px;
              color: #FFFFFF;
              line-height: 37px;
              text-align: center;
              font-style: normal;

            }

            .text_13 {
              width: 166px;
              height: 76px;
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 22px;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 30px;
              margin: 25px 0 0 24px;
            }

          }

          .box_7 {

            height: 48px;
            margin: 20px 0 166px 0px;

            .text-wrapper_10 {
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 4px;
              height: 48px;
              cursor: pointer;
              margin-right: 16px;

              .text_14 {
                height: 28px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 20px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 28px;
                margin: 10px 16px 0 16px;
              }
            }

            .text-wrapper_11 {
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 4px;
              height: 48px;
              margin-left: 16px;
              width: 172px;

              .text_15 {
                width: 140px;
                height: 28px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 20px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 28px;
                margin: 10px 0 0 16px;
              }
            }

            .text-wrapper_12 {
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 4px;
              height: 48px;
              margin-left: 16px;
              width: 172px;

              .text_16 {
                width: 140px;
                height: 28px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 20px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 28px;
                margin: 10px 0 0 16px;
              }
            }

            .text-wrapper_13 {
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 4px;
              height: 48px;
              margin-left: 16px;
              width: 172px;

              .text_17 {
                width: 140px;
                height: 28px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 20px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 28px;
                margin: 10px 0 0 16px;
              }
            }

            .text-wrapper_14 {
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 4px;
              height: 48px;
              margin-left: 16px;
              width: 172px;

              .text_18 {
                width: 140px;
                height: 28px;
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 20px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 28px;
                margin: 10px 0 0 16px;
              }
            }
          }
        }

      }

      .container {
        margin: 0 auto;

        .text-wrapper_15 {
          width: 352px;
          height: 53px;
          margin: 60px 0 0 0;

          .text_19 {
            width: 152px;
            height: 53px;
            overflow-wrap: break-word;
            color: rgba(38, 38, 38, 1);
            font-size: 38px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
            line-height: 53px;
          }

          .text_20 {
            width: 180px;
            height: 28px;
            overflow-wrap: break-word;
            color: rgba(89, 89, 89, 1);
            font-size: 20px;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 28px;
            margin-top: 19px;
          }
        }

        .grid_1 {
          width: 1536px;
          flex-wrap: wrap;
          margin: 50px 0 0 0;

          .list-items_1 {
            box-shadow: 0px 8px 12px 0px rgba(17, 101, 237, 0.05);
            background-color: rgba(255, 255, 255, 1);
            border-radius: 12px;
            width: 351px;
            height: 498px;
            justify-content: flex-center;
            margin: 0 44px 44px 0;

            &:nth-child(4n) {
              margin-right: 0;
            }

            &:nth-last-child(-n + 4) {
              margin-bottom: 0;
            }

            .block_3 {
              border-radius: 12px;
              width: 311px;
              height: 290px;
              margin: 20px 0 0 20px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .block_4 {
              height: 28px;
              margin: 20px 20px 0 20px;
              .text-wrapper_16 {
                background-color: rgba(13, 124, 96, 0.1);
                border-radius: 4px;
                height: 28px;
                margin-right: 10px;
                .text_21 {
                  height: 20px;
                  overflow-wrap: break-word;
                  color: rgba(13, 124, 96, 1);
                  font-size: 18px;
                  font-weight: normal;
                  text-align: left;
                  white-space: nowrap;
                  line-height: 20px;
                  margin: 4px 10px 0 10px;
                }
              }

              .text_22 {
                flex:1;
                height: 28px;
                overflow: hidden;
                overflow-wrap: break-word;
                color: rgba(49, 50, 58, 1);
                font-size: 20px;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                text-align: left;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 28px;
              }
            }

            .text-wrapper_17 {
              background-color: rgba(247, 247, 247, 1);
              border-radius: 12px;
              height: 100px;
              width: 311px;
              margin: 10px 0 20px 20px;
              /* 防止文本换行 */
              box-sizing: border-box;
              padding: 16px;
              
              .text{
                width: 100%;
                height: 100%;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                /* 限制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                /* 你的 padding 值 */
                
                /* 确保 padding 包含在高度计算中 */
                color: rgba(140, 140, 140, 1);
                font-size: 16px;
                font-weight: normal;
                text-align: left;
                line-height: 22px;
                p{
                  margin: 0;
                }
              }
            }
          }
        }

        .text-wrapper_18 {
          box-shadow: 0px 8px 12px 0px rgba(17, 101, 237, 0.05);
          background-color: rgba(17, 101, 237, 1);
          border-radius: 12px;
          height: 80px;
          width: 300px;
          margin: 90px auto 71px auto;
          cursor: pointer;

          .text_24 {
            width: 156px;
            height: 37px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 26px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
            line-height: 37px;
            margin: 22px 0 0 72px;
          }
        }
      }

    }
  }
}
</style>
